<template>
	<view class="group-buying-wrapper">
		<top-nav>
			<view class="top-nav-content">
				<view class="left" @click="returnFun">
					<view class="icon"></view>
					<view>返回</view>
				</view>
				<view class="title">矿池</view>
				<view class="right" @click="gotoPage('/pages/sample/record')">记录</view>
			</view>
		</top-nav>
		<u-notice-bar v-show="noticeShow" mode="horizontal" :close-icon="true" color="#FFB721" font-size="30" bg-color="#4B4B4B" :is-circular="false" :list="['30人一团，中奖得矿机，未中奖']" @close="noticeShow=false"></u-notice-bar>
		<view class="title-wrapper" v-if="sampleInfo.state==1">挖矿中</view>
		<view class="list green" v-if="sampleInfo.state==1">
			<view class="icon"></view>
			<view class="info">
				<view class="number">{{sampleInfo.money}}</view>
				<view class="name">AGT</view>
			</view>
			<view class="right">
				<view class="btn" @click="handelFun()">兑换提现</view>
				<view class="desc">可兑换：{{sampleInfo.usable}}</view>
				<view class="desc">冻结中：{{sampleInfo.frozen}}</view>
			</view>
		</view>
		<view class="title-wrapper" v-if="sampleInfo.state==0">已失效</view>
		<view class="list green closed"  v-if="sampleInfo.state==0">
			<view class="icon"></view>
			<view class="info">
				<view class="number">{{sampleInfo.money}}</view>
				<view class="name">AGT</view>
			</view>
			<view class="right">
				<view class="btn" @click="actived()">激活</view>
				<view class="desc">可兑换：{{sampleInfo.usable}}</view>
				<view class="desc">冻结中：{{sampleInfo.frozen}}</view>
			</view>
		</view>
		<u-modal v-model="show" :show-cancel-button="true" cancel-color="#9B9B9B" confirm-text="立即参与" confirm-color="#4A4A4A" :show-title="false">
			<view class="model-content">
				立即拼团<br>
				马上赚钱
			</view>
		</u-modal>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import topNav from 'components/top-nav/top-vue.vue';
	export default{
		data(){
			return {
				show: false,
				noticeShow: true,
				sampleInfo: {}
			}
		},
		components:{
			'topNav':topNav,
		},
		mounted() {
			this.getData();
		},
		methods:{
			getData(){
				this.$u.post('/api/getLtcData', {account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.sampleInfo = res.data;
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			handelFun(){
				this.$u.post('/api/exchangeWithdrawal', {account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: '兑换成功',
							type: 'success',
						})
						this.getData();
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			},
			gotoPage(path){
				uni.navigateTo({
					url: path
				});
			},
			returnFun(){
				uni.navigateBack();
			},
			actived(){
				this.$u.post('/api/musterLtc', {account_id:uni.getStorageSync('account_id')}).then(res=>{
					if(res.code==200){
						this.$refs.uToast.show({
							title: '激活成功',
							type: 'success',
						})
						this.getData();
					} else {
						this.$refs.uToast.show({
							title: res.message,
							type: 'error',
						})
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.group-buying-wrapper{
		.top-nav-content{
			width:100%;
			display: flex;
			align-items: center;
			position:relative;
			.left{
				position: absolute;
				left: 0;
				display: flex;
				height: 100%;
				align-items: center;
				top:0;
				.icon{
					width: 0;
					height: 0;
					border-top: 10rpx solid transparent;
					border-right: 12rpx solid #FFFFFF;
					border-bottom:10rpx solid transparent;
					margin:0 20rpx;
				}
			}
			.title{
				flex:1;
				text-align: center;
				font-size:24*2rpx;
			}
			.right{
				position:absolute;
				right:40rpx;;
				top:0;
				height:100%;
				display: flex;
				align-items: center;
			}
		}
		.list{
			margin:0 24rpx 19*2rpx;
			padding:0 40rpx;
			height:102*2rpx;
			display:flex;
			align-items: center;
			position:relative;
			&::before{
				content:'';
				display: block;
				width:20rpx;
				height:20rpx;
				border-radius: 50%;
				position:absolute;
				background-color: #202020;
				top:-10rpx;
				left: 160rpx;
			}
			&::after{
				content:'';
				display: block;
				width:20rpx;
				height:20rpx;
				border-radius: 50%;
				position:absolute;
				background-color: #202020;
				bottom:-10rpx;
				left: 160rpx;
			}
			.icon{
				width:100rpx;
				height:100rpx;
				background-color: #fff;
				border-radius: 50%;
				margin-right:60rpx;
				background-image: url('/static/groupbuying/icon1.png');
				background-size: 80% 80%;
				background-position: center;
				background-repeat: no-repeat;
			}
			.info{
				flex:1;
				.number{
					font-size:15*2rpx;
					color:#333;
					font-size:30rpx;
					margin-bottom:10rpx;
				}
				.name{
					font-size:13*2rpx;
					margin-bottom:12*2rpx;
				}
			}
			.right{
				display: flex;
				align-items: flex-end;
				flex-direction: column;
				.btn{
					width: 72*2rpx;
					height: 24*2rpx;
					border-radius: 12*2rpx;
					display:flex;
					align-items: center;
					justify-content: center;
					font-size:12rpx;
					margin-bottom: 20rpx;
				}
				.desc{
					font-size:11*2rpx;
				}
			}
			&.green{
				background-color: #69DA73;
				border-radius: 8rpx;
				.btn{
					background-color: #FFB721;
				}
			}
			&.yellow{
				background-color: #FFB721;
				border-radius: 8rpx;
				.btn{
					background-color: #69DA73;
				}
			}
			&.closed{
				background-color: rgba(255,255,255,0.1);
				border-radius: 8rpx;
				.info{
					.number{
						color:#fff;
					}
				}
				.btn{
					background-color: #69DA73;
				}
			}
		}
		.model-content{
			color:#4A4A4A;
			height:106*2rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size:18*2rpx;
		}
		.title-wrapper{
			padding-left: 40rpx;
			font-size:24*2rpx;
			margin:19*2rpx 0 20rpx;
		}
	}
</style>
